<template>
  <div class="form-container">
    <div class="form-item">
      <label class="form-label">标题</label>
      <input type="text" class="form-input" v-model="formData.title" />
    </div>
    <div class="form-item">
      <label class="form-label">图片</label>
      <!-- 隐藏的文件上传输入框，通过点击图片上传区域触发 -->
      <input
        type="file"
        ref="fileInput"
        style="display: none"
        @change="handleFileChange"
      />
      
      <!-- 修改时显示对应行图片，新增时显示上传框 -->
      <div v-if="imageUrl" class="img-preview" @click="triggerFileInput">
        <img :src="imageUrl" alt="视频图片" class="preview-img">
        <div class="change-text">点击更换图片</div>
      </div>
      
      <div v-else class="img-upload" @click="triggerFileInput">
        <div class="plus-icon">+</div>
        <!-- 显示已选文件名称 -->
        <span v-if="selectedFileName" class="file-name">{{ selectedFileName }}</span>
      </div>
    </div>
    <div class="form-item">
      <label class="form-label">视频地址</label>
      <input type="text" class="form-input" v-model="formData.videoUrl" />
    </div>
    <div class="form-item">
      <label class="form-label">添加时间</label>
      <input type="text" class="form-input" v-model="formData.addTime" readonly />
    </div>
  </div>
</template>

<script setup>
import { ref, watch, defineProps } from 'vue';

// 接收父组件传递的视频数据和图片地址
const props = defineProps({
  videoData: {
    type: Object,
    default: () => ({})
  },
  imageUrl: {
    type: String,
    default: ''
  }
});

// 表单数据，用于回显和编辑
const formData = ref({
  title: '',
  videoUrl: '',
  addTime: '',
  imageName: '' // 存储图片文件名
});

// 存储选中的文件名
const selectedFileName = ref('');

// 用于引用文件输入框
const fileInput = ref(null);

// 触发文件选择框
const triggerFileInput = () => {
  fileInput.value.click();
};

// 处理文件选择
const handleFileChange = (e) => {
  const file = e.target.files[0];
  if (file) {
    selectedFileName.value = file.name;
    formData.value.imageName = file.name;
    // 这里可以添加文件上传到服务器的逻辑
    console.log('选中的图片文件：', file);
  }
};

// 监听视频数据变化，实现数据回显
watch(() => props.videoData, (newVal) => {
  if (newVal) {
    formData.value = {
      title: newVal.title || '',
      videoUrl: newVal.videoUrl || '',
      addTime: newVal.addTime || '',
      imageName: newVal.imageName || ''
    };
    selectedFileName.value = newVal.imageName || '';
  } else {
    // 如果是新增操作，清空表单
    formData.value = {
      title: '',
      videoUrl: '',
      addTime: '',
      imageName: ''
    };
    selectedFileName.value = '';
  }
}, { immediate: true }); // 初始化时立即执行
</script>

<style scoped>
.form-container {
  width: 100%;
  padding: 10px;
}
.form-item {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}
.form-label {
  width: 80px;
  margin-right: 10px;
}
.form-input {
  flex: 1;
  padding: 5px;
  outline: none;
  border: 1px solid #ccc;
}

/* 图片预览样式（修改时显示） */
.img-preview {
  width: 120px;
  height: 120px;
  position: relative;
  cursor: pointer;
  border: 1px solid #ccc;
}
.preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.change-text {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 3px 0;
  background-color: rgba(0,0,0,0.5);
  color: white;
  font-size: 12px;
  text-align: center;
}

/* 图片上传框样式（新增时显示） */
.img-upload {
  width: 120px;
  height: 120px;
  border: 1px dashed #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.plus-icon {
  font-size: 24px;
  margin-right: 5px;
}
.file-name {
  font-size: 12px;
}
</style>
